{extend name="main" /}

{block name="css"}
<style>
    .banner-images{

    }
    .banner-images .item{
        display: inline-block;
        margin: 5px;
        position: relative;
    }
    .banner-images .item .btn-box{
        position: absolute;
        width: 100%;
        bottom: -5px;
        text-align: right;
        display: none;
    }
    .banner-images .item:hover .btn-box{
        display: block;
    }
    .banner-images .item .arr-icon {
        text-align: center;
        width: 20px;
        height: 30px;
        line-height: 30px;
        background: rgba(0,0,0,.5);
        color: #FFFFFF;
        position: absolute;
        top: 50%;
        margin-top: -15px;
        z-index: 1;
        display: none;
        cursor: pointer;
    }
    .banner-images .item .arr-icon.left{
        left: 0;
    }
    .banner-images .item .arr-icon.right{
        right: 0;
    }
    .banner-images .item:hover .arr-icon{
        display: inline-block;
    }
</style>
{/block}

{block name="body"}
{include file="breadcrumb" /}
<div class="layui-fluid">
    <div class="layui-card">
        <div class=" layui-card-header layuiadmin-card-header-auto">
            <form class="layui-form" method="get">
                <input type="hidden" name="bcid" value="{:input('bcid')}"><!--保留当前位置的bcid参数-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">类型标识</label>
                        <div class="layui-input-inline">
                            <div class="layui-input-wrap">
                                <input type="text" name="type" placeholder="搜索类型标识" class="layui-input" id="ID-TYPE" value="{$type}" autocomplete="off">
                                <div class="layui-input-suffix">
                                    <i class="layui-icon layui-icon-down"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-card-body">
            <div class="btn-box">
                <a href="{:url('add')}" class="layui-btn layui-btn-sm xn_open" data-width="70%" data-height="90%">添加</a>
            </div>
            <table class="layui-table">
                <thead>
                    <tr>
                        <th width="80">类型标识</th>
                        <th>图片</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                {foreach name="list" item="vo"}
                <tr>
                    <td>{$vo.type}</td>
                    <td>
                        <div class="banner-images">
                            {foreach name="vo.images" item="v1" key="k"}
                            <div class="item">
                                <img src="{$v1}" data-bigimg="{$v1}" alt="{$vo.titles[$k]}" title="{$vo.titles[$k]}" class="xn_img" style="height: 120px;max-width: inherit">
                                <a href="{:url('sort',array('id'=>$vo.ids[$k],'to'=>'left'))}" class="arr-icon left">
                                    <i class="layui-icon layui-icon-left"></i>
                                </a>
                                <a href="{:url('sort',array('id'=>$vo.ids[$k],'to'=>'right'))}" class="arr-icon right">
                                    <i class="layui-icon layui-icon-right"></i>
                                </a>
                                <div class="btn-box">
                                    <div class="layui-btn-group">
                                        <a href="{:url('edit',array('id'=>$vo.ids[$k]))}" class="layui-btn layui-btn-xs xn_open" title="编辑">
                                            <i class="layui-icon layui-icon-edit"></i>
                                        </a>
                                        <a href="{:url('delete',array('id'=>$vo.ids[$k]))}" title="确定要删除吗？" class="layui-btn layui-btn-danger layui-btn-xs xn_delete">
                                            <i class="layui-icon layui-icon-delete"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            {/foreach}
                        </div>
                    </td>
                    <td>
                        <a href="{:url('add',array('type'=>$vo.type))}" class="layui-btn layui-btn-sm xn_open" data-width="70%" data-height="90%">
                            添加
                        </a>
                        <a href="{:url('delete',array('type'=>$vo.type))}" title="确定要删除该组图片吗？"
                           class="layui-btn layui-btn-danger layui-btn-sm xn_delete">
                            删除
                        </a>
                    </td>
                </tr>
                {/foreach}
                </tbody>
            </table>
        </div>
    </div>

</div>
{/block}

{block name="js"}
<script>
    $('.arr-icon').click(function (e) {
        e.stopPropagation();
        e.preventDefault();
        layer.load(2,{shade: [0.5, '#000']})
        var url = $(this).attr('href');
        $.get(url,{},function (data){
            layer.closeAll('loading');
            if( data.code === 1 ) {
                window.location.reload();
            }
        },'json')
    })
</script>
{/block}